<template>
    <div>
            <el-row :gutter="20">
    <el-col
      v-for="(o, index) in data"
      :key="o"
      :span="4"
      
    >
      <el-card :body-style="{ padding: '0px' }">
        <img
          :src="o.img"
          class="image"
        />
        <div style="padding: 14px;text-align: center;">
          <span class="hidden">{{o.name}}</span>
          <div class="bottom">
            <el-button text class="button" @click="router.push('/detail/'+o.id)">商品购买</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router';
defineProps(['data'])

const currentDate = ref(new Date())

</script>

<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}
.hidden{
  margin: 0 auto;
  width: 160px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>